<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :custom-components="customComponents">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :tabs="tabs" />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button size="mini" type="primary" @click="exportAll">导出记录</el-button>
      </template>
      <!-- 多选操作 -->
      <template v-slot:table-button="scope">
        <el-button size="mini" @click="exportSelected(scope)">批量导出</el-button>
      </template>
    </page-list>
    <face-view v-if="faceVisible" :user-id="userId" :scene-key="sceneKey" :scene-id="sceneId" @close="faceVisible = false" />
  </div>
</template>

<script>
import Tabs from '../tabs';
import User from '@/pages/user/student/account/components/user.vue';
import PageList from '@public/template/page_list.vue';
import { Loading } from 'element-ui'
import FaceView from '@/pages/user/student/face/FaceView';
export default {
  components: {
    Tabs,
    PageList,
    FaceView
  },
  data() {
    return {
      uri: '/exam/admin/paper/' + this.$route.params.id + '/answerRecord',
      tabs: [
        {
          title: '试卷考试记录',
          uri: '/exam/paper/random/' + this.$route.params.id + '/record',
          meta: {
            permission: 'exam.paper.record'
          }
        }
      ],
      doactions: [
        { title: '详情', meta: { permission: 'exam.paper.record' }, callback: this.recordDetails },
        {
          title: '人脸数据',
          callback: this.face
        }
      ],
      customComponents: {
        user: User
      },
      faceVisible: false,
      userId: 0,
      sceneKey: 'exam',
      sceneId: 0
    }
  },
  methods: {
    // 导出所有
    exportAll() {
      this.$box
          .confirm('确认要导出本试卷的所有考试记录吗')
          .then(() => {
            const loadingInstance = Loading.service({
              text: '正在导出文件，请稍后...'
            })
            this.$http
                .downloadExcel('/exam/admin/paper/' + this.$route.params.id + '/record/exports')
                .then(() => {
                  loadingInstance.close()
                  this.$message.success('下载成功')
                })
                .catch(() => {
                  loadingInstance.close()
                  this.$message.error('下载失败')
                })
          }).catch(() => {});
    },
    // 导出选中
    exportSelected({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要导出的记录');
        return false;
      }
      ids = ids.join(',');

      const loadingInstance = Loading.service({
        text: '正在导出文件，请稍后...'
      })
      this.$http
          .downloadExcel('/exam/admin/paper/' + this.$route.params.id + '/record/export', {
            records: ids
          })
          .then(() => {
            loadingInstance.close()
            this.$message.success('下载成功')
          })
          .catch(() => {
            loadingInstance.close()
            this.$message.error('下载失败')
          })
    },
    recordDetails({ row }) {
      this.$router.push({ path: '/exam/paper/settled/' + row.paper_id + '/record/' + row.id + '/details' });
    },
    face({ row }) {
      this.sceneId = row.paper_id
      this.userId = row.user_id
      this.faceVisible = true;
    }
  }
}
</script>

<style scoped>

</style>
